<!--
 * @Author: wang_changtan 2196064304@qq.com
 * @Date: 2024-02-25 20:37:15
 * @LastEditors: wang_changtan 2196064304@qq.com
 * @LastEditTime: 2024-02-25 22:14:06
 * @FilePath: /web_music_app_vue3_vite_ts/src/components/MusicTable/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="table-music">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="no" width="50" />
            <el-table-column width="90">
                <template #default="scope">
                    <div class="action" style="display: flex; align-items: center">
                        <!-- <svg t="1708868569151" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="71866" width="16" height="16">
                            <path
                                d="M512 896l-60.8-55.2C236 645.6 93.6 516 93.6 358.4 93.6 229.6 194.4 128 324 128c72.8 0 142.4 33.6 188 87.2C557.6 162.4 627.2 128 700 128c128.8 0 230.4 100.8 230.4 230.4 0 157.6-142.4 287.2-357.6 482.4L512 896z"
                                p-id="71867" fill="#d33a31"></path>
                        </svg> -->
                        <svg t="1708867844802" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="71712" width="16" height="16">
                            <path
                                d="M523.733333 841.024l33.173334-32.576 99.690666-97.813333c70.976-69.632 120.32-117.973333 138.709334-135.893334 59.008-57.514667 93.248-121.28 99.626666-184.234666 6.250667-61.44-15.488-119.744-61.589333-164.672-44.992-43.84-98.88-61.909333-157.034667-52.906667-49.365333 7.616-101.034667 34.624-150.016 78.848a21.333333 21.333333 0 0 1-28.586666 0c-48.981333-44.224-100.650667-71.232-150.016-78.869333-58.154667-8.96-112.042667 9.088-157.034667 52.928-46.101333 44.928-67.84 103.210667-61.610667 164.693333 6.4 62.933333 40.64 126.72 99.648 184.213333a100207.573333 100207.573333 0 0 1 145.92 142.826667l24.256 23.765333L512 852.522667l11.733333-11.498667z m-11.733333 11.52l-1.493333 1.429333A2.133333 2.133333 0 0 1 512 853.333333c0.512 0 1.045333 0.213333 1.493333 0.64l-1.493333-1.450666z m157.781333-721.792c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z"
                                :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'" p-id="71713"></path>
                        </svg>
                        <svg style="padding-left: 20px;" t="1708859241670" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="70699" width="16" height="16">
                            <path
                                d="M828.1 896.7H199.9c-73.2 0-132.8-59.6-132.8-132.8V514.5c0-17.7 14.3-32 32-32s32 14.3 32 32v249.4c0 37.9 30.9 68.8 68.8 68.8h628.2c37.9 0 68.8-30.9 68.8-68.8V514.5c0-17.7 14.3-32 32-32s32 14.3 32 32v249.4c0 73.2-59.6 132.8-132.8 132.8z"
                                p-id="70700" :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'"></path>
                            <path
                                d="M512.4 740.7c-17.7 0-32-14.3-32-32V151.8c0-17.7 14.3-32 32-32s32 14.3 32 32v556.9c0 17.7-14.3 32-32 32z"
                                p-id="70701" :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'"></path>
                            <path
                                d="M518.5 737.4c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3l156.9-156.9c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L541.1 728c-6.2 6.3-14.4 9.4-22.6 9.4z"
                                p-id="70702" :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'"></path>
                            <path
                                d="M506.2 737.2c-8.2 0-16.4-3.1-22.6-9.4L326.7 570.9c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l156.9 156.9c12.5 12.5 12.5 32.8 0 45.3-6.3 6.3-14.5 9.4-22.7 9.4z"
                                p-id="70703" :fill="themeName !== 'dark' ? '#797979' : '#b5b5b5'"></path>
                        </svg>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="音乐标题" width="380">
                <template #default="scope">
                    <div class="ell">
                        <span class="title">{{ scope.row.title }}</span>
                        <span class="desc" style="padding-left: 8px;">{{ scope.row.desc }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="歌手" width="180">
                <template #default="scope">
                    <span class="desc ell" style="padding-left: 8px;">{{ scope.row.signer }}</span>
                </template>

            </el-table-column>
            <el-table-column label="专辑" width="180">
                <template #default="scope">
                    <span class="desc" style="padding-left: 8px;">{{ scope.row.zj }}</span>
                </template>
            </el-table-column>
            <el-table-column label="时长" width="180">
                <template #default="scope">
                    <span class="desc" style="padding-left: 8px;">{{ scope.row.time }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="prop" />
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, computed } from "vue";

import useGlobalStore from "../../store/modules/global";
//获取小仓库对象
let globalStore = useGlobalStore();
const themeName = computed(() => globalStore.themeName);

let props = defineProps({
    tableData: []
}); //数组|对象写法都可以

</script>

<style scoped lang="less">
.table-music {
    :deep(.el-table__header-wrapper), :deep(.el-table__inner-wrapper) {
        background-color: @mainBgColor !important;
    }

    :deep(.el-table__cell) {
        background-color: @mainBgColor !important;
        font-size: 13px;
    }
    :deep(.el-table td.el-table__cell), :deep(.el-table th.el-table__cell.is-leaf){
        border-bottom: none !important;
    }
    :deep(.el-table__empty-block) {
        background-color: @mainBgColor !important;
    }

    :deep(.el-table__inner-wrapper::before),
    :deep(.el-table__inner-wrapper::after) {
        background-color: transparent !important;
    }

    :deep(.el-table__row:nth-child(2n - 1)) {
        .el-table__cell {
            background-color: @mainItemBg !important;
        }
    }

    :deep(.el-table__row) {
        cursor: pointer;
        &:hover {
            .el-table__cell {
                background-color: @mainItemBgHover !important;
            }
        }
    }




    .title {
        color: @color;
        font-size: 13px;
    }

    .desc {
        color: @fzFontColor;
        font-size: 13px;
    }

    .action {
        cursor: pointer;
    }

}</style>